<template>
  <el-dialog ref="elDialog" :visible.sync="visible" title="流程日志" :close-on-click-modal="false" :modal-append-to-body="false" :append-to-body="true"
  class="JNPF-dialog" lock-scroll :width="width" @close="closeDialog" @open="onOpen">
     <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input v-model="query.keyword" placeholder="请输入关键词查询" clearable
                @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">
                {{$t('common.search')}}</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
        <JNPF-table v-loading="listLoading" :data="list">
          <el-table-column prop="prevName" label="前一个步骤" show-overflow-tooltip min-width="200" />
          <el-table-column prop="nextName" label="下一个步骤" width="200" />
          <el-table-column prop="operatorType" label="操作类型" width="150" />
          <el-table-column prop="status" label="阶段状态" width="70" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">未开始</span>
              <span v-if="scope.row.status == 2">进行中</span>
              <span v-if="scope.row.status == 3">暂停</span>
              <span v-if="scope.row.status == 4">终止</span>
              <span v-if="scope.row.status == 5">完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="comment" label="操作意见" width="200" />
          <el-table-column prop="creatorUserId" label="创建人" width="120" />
          <el-table-column prop="creatorTime" label="创建时间" :formatter="jnpf.tableDateFormat"
            width="120" />
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize" @pagination="initData" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onOk()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import mixin from '@/mixins/generator/index'
import { deepClone } from '@/utils'
import { ListStageLog } from '@/api/workFlow/FlowStage'
export default {
  // mixins: [mixin],
  components: { },
  props: {
    config: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      currModelId:this.$store.state.generator.dynamicModelExtra.modelId,
      businessId:this.$store.state.generator.dynamicModelExtra.id,
      visible:true,
      width:'1200px',
      query: { keyword: '', type: 1 },
      list: [],
      category: '',
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc',
        sidx: ''
      },
      total: 0,
      listLoading: false,
      formVisible: false,
      addVisible: false,
      currWebType: '',
      currId: '',
      categoryList: []
    }
  },
  computed: {
    valueJson(){
      return JSON.parse(this.config.defaultValue)
    },
    
  },
  watch: {
    visible(val) {
      if (val) return
      this.closeDialog()
    }
  },
  created() {
    debugger
    this.initData()
    // this.$refs.elDialog[0].$el.firstChild.style.height = '90%';
  },

  methods: {
    initData() {
      debugger
      this.listLoading = true
      let query = {
        ...this.listQuery,
        ...this.query,
        modelId:this.currModelId,
        businessId: this.businessId
      }
      ListStageLog(query).then(res => {
        debugger
        this.list = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
      })
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc',
        sidx: ''
      }
      this.initData()
    },
    reset() {
      this.query.keyword = ''
      this.search()
    },
    onOpen(){
      debugger
      this.visible = true
      this.initData()
    },
    closeDialog(){
      this.$emit('close', true)
    },
    onOk(){
     this.closeDialog()
    },
    submitLog(val){
      
     
    },
    initDialogHeight() {
    let h = initLayoutInfo().height;
    let devicePixelRatio = window.devicePixelRatio; 
    let jResolutionHeight = window.screen.height;
    if (devicePixelRatio == 1) {
        if (jResolutionHeight == 600) {
            //当电脑屏幕分辨率的高度为600，缩放比例为100%时
            h = h - 120;
        } else if (jResolutionHeight == 768) {
            //当电脑屏幕分辨率的高度为768，缩放比例为100%时
            h = h - 140;
        } else if (jResolutionHeight == 720) {
            //当电脑屏幕分辨率的高度为720，缩放比例为100%时
            h = h - 140;
        } else if (jResolutionHeight == 800) {
            //当电脑屏幕分辨率的高度为800，缩放比例为100%时
            h = h - 170;
        } else if (jResolutionHeight == 864) {
            //当电脑屏幕分辨率的高度为864，缩放比例为100%时
            h = h - 160;
        } else if (jResolutionHeight == 960) {
            //当电脑屏幕分辨率的高度为960，缩放比例为100%时
            h = h - 170;
        } else if (jResolutionHeight == 900) {
            //当电脑屏幕分辨率的高度为900，缩放比例为100%时
            h = h - 195;
        } else if (jResolutionHeight == 1024) {
            //当电脑屏幕分辨率的高度为1024，缩放比例为100%时
            h = h - 180;
        } else if (jResolutionHeight == 1050) {
            //当电脑屏幕分辨率的高度为1050，缩放比例为100%时
            h = h - 190;
        } else if (jResolutionHeight == 1080) {
            //当电脑屏幕分辨率的高度为1080，缩放比例为100%时
            h = h - 200;
        } else {
            h = h - 200;
        }
 
    } else if (devicePixelRatio == 1.25) {
        if (jResolutionHeight == 615) {
            //当电脑屏幕分辨率的高度为768，缩放比例为125%时   615为可视高度
            h = h - 120;
        } else if (jResolutionHeight == 640) {
            //当电脑屏幕分辨率的高度为800，缩放比例为125%时   640为可视高度
            h = h - 130;
        } else if (jResolutionHeight == 692) {
            //当电脑屏幕分辨率的高度为864，缩放比例为125%时   692为可视高度
            h = h - 140;
        } else if (jResolutionHeight == 768) {
            //当电脑屏幕分辨率的高度为960，缩放比例为125%时   768为可视高度
            h = h - 150;
        } else if (jResolutionHeight == 820) {
            //当电脑屏幕分辨率的高度为1024，缩放比例为125%时   820为可视高度
            h = h - 160;
        } else if (jResolutionHeight == 840) {
            //当电脑屏幕分辨率的高度为1050，缩放比例为125%时   840为可视高度
            h = h - 170;
        } else if (jResolutionHeight == 864) {
            //当电脑屏幕分辨率的高度为1080，缩放比例为125%时   864为可视高度
            h = h - 180;
        }else {
            h = h - 190;
        }
    } else if (devicePixelRatio == 1.5) {
        if (jResolutionHeight == 640) {
            //当电脑屏幕分辨率的高度为960，缩放比例为150%时   640为可视高度
            h = h - 130;
        } else if (jResolutionHeight == 683) {
            //当电脑屏幕分辨率的高度为1024，缩放比例为150%时   683为可视高度
            h = h - 140;
        } else if (jResolutionHeight == 700) {
            //当电脑屏幕分辨率的高度为1050，缩放比例为150%时   700为可视高度
            h = h - 150;
        } else if (jResolutionHeight == 720) {
            //当电脑屏幕分辨率的高度为1080，缩放比例为150%时   720 为可视高度
            h = h - 160;
        }else {
            h = h - 170;
        }
    } else if (devicePixelRatio == 1.75) {
        if (jResolutionHeight == 600) {
            //当电脑屏幕分辨率的高度为1050，缩放比例为175%时   600为可视高度
            h = h - 130;
        } else if (jResolutionHeight == 618) {
            //当电脑屏幕分辨率的高度为1080，缩放比例为175%时   618为可视高度
            h = h - 140;
        }else {
            h = h - 150;
        }
    } else if (devicePixelRatio == 2) {
        //Mac的缩放比例返回值为2
        h = h - 210;
    } else {
        h = h - 210;
    }
    return h
}
  }
    
}
</script>
<style lang="scss" scoped>
 .form-dialog-body {
     height: 500px;
     display: flex;
     overflow: hidden;
 }
 .form-dialog-selector{
  display: flex;
  margin-bottom:10px;
 }
 .JNPF-flex-log {
  display: flex;
  flex-direction: column;

  .el-table {
    flex: 1;

    &::before {
      border-bottom: 0;
      height: 0px
    }
  }

  .el-table__fixed::before,
  .el-table__fixed-right::before {
    border-bottom: 0;
    height: 0px
  }
  height: calc(100vh - 60px);

   
}
</style>